import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Alert,
  ScrollView,
  Dimensions,
  Switch,
} from 'react-native';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import MoreCell from '../cell/Cell';
const { width } = Dimensions.get('window');
export default class More extends Component {
  static navigationOptions = {
    header: null,
  };
  state = {
    switchValue: false,
  }
  handleSetting = () => {
    Alert.alert('点击设置');
  }
  handleSwitch = (value) => {
    this.setState({ switchValue: value });
  }
  handleCell = (title, index) => {
    if (index !== 1) {
      Alert.alert(title);
    }
  }
  renderMoreCell = () => {
    const cellArr = [{
      title: '扫一扫',
      gapTop: 10
    }, {
      title: '省流量模式',
      // 通过transform的scale属性改变Switch组件的大小，good！
      rightContent: (
          <Switch
            value={this.state.switchValue}
            onValueChange={this.handleSwitch}
            style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
          />
      ),
      gapTop: 10
    }, {
      title: '消息提醒'
    }, {
      title: '邀请好友使用小陈电商',
    }, {
      title: '清空缓存',
      rightContent: (
        <View style={styles.rightContentStyle}>
          <Text style={{ color: '#bbb' }}>1.94M</Text>
          <AntDesignIcon size={18} name="right" color="#bbb" />
        </View>
      )
    }, {
      title: '意见反馈',
      gapTop: 10
    }, {
      title: '问卷调查'
    }, {
      title: '联系我们'
    }, {
      title: '支付帮助'
    }, {
      title: '网络诊断'
    }, {
      title: '关于码团',
    }, {
      title: '我要应聘'
    }, {
      title: '精品应用',
      gapTop: 10
    }];
    return cellArr.map((item, index) => {
      const { rightContent, ...rest } = item;
      return (
        <TouchableOpacity
          key={index.toString()}
          activeOpacity={0.5}
          onPress={this.handleCell.bind(this, item.title, index)}
        >
          <MoreCell
            {...rest}
            rightContent={rightContent || <AntDesignIcon size={18} name="right" color="#bbb" />}
          />
        </TouchableOpacity>
      )
    });
  }
  render() {
    return (
      <View style={styles.morePage}>
        <View style={styles.navigatorTitle}>
          <Text style={styles.leftText}>设置</Text>
          <View style={styles.rightIcon}>
            <TouchableOpacity activeOpacity={0.5} onPress={this.handleSetting}>
              <AntDesignIcon name="setting" size={20} style={{ marginRight: 10 }} color="#fff" />
            </TouchableOpacity>
          </View>
        </View>
        <ScrollView contentContainerStyle={styles.moreScrollView}>
          {this.renderMoreCell()}
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  morePage: {
    flex: 1,
    alignItems: 'center',
  },
  navigatorTitle: {
    paddingTop: 30,
    width: '100%',
    height: 84,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgb(106, 146, 266)',
    position: 'relative'
  },
  leftText: {
    color: '#fff'
  },
  rightIcon: {
    position: 'absolute',
    right: 0,
    top: 48
  },
  moreScrollView: {
    backgroundColor: '#e8e8e8',
    width,
    flex: 1,
  },
  rightContentStyle: {
    flexDirection: 'row',
    alignItems: 'center'
  }
})